<template class="">
  <div style="padding: 24px">
    <div class="header">
      <h2>流量与正常率记录</h2>
      <div>
        <transition name="el-fade-in" mode="out-in">
          <el-button
            v-if="show != 'post'"
            @click="show = 'post'"
            link
            class="nav-btn"
          >
            <el-icon> <Plus /> </el-icon>
          </el-button>
          <el-button
            v-else-if="show != 'query'"
            @click="show = 'query'"
            link
            class="nav-btn"
          >
            <el-icon> <Search /> </el-icon>
          </el-button>
        </transition>
      </div>
    </div>
    <!-- <el-divider /> -->
    <transition name="el-fade-in" mode="out-in">
      <PostView v-if="show == 'post'" />
      <QueryView v-else-if="show == 'query'" />
    </transition>
  </div>
</template>

<script setup>
import { ref } from "vue";
import PostView from "./PostView.vue";
import QueryView from "./QueryView.vue";
const show = ref("post");
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* padding: 6px 12px; */
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed #8884;
}

.nav-btn {
  transition: all 0.5s ease-out;
  opacity: 0.75;
}

.nav-btn:hover {
  transform: scale(1.5);
  opacity: 1;
}
</style>
